<template>
	<view class="sidebar">
		<view class="skip_page">
			<view class="s_friend">
				<image src="" mode="" class="s_img" @click="sFriend"></image>
				发现好友
			</view>
			<view class="s_create">
				<view class="s_create_01" v-for="(item,index) in ImgArr" :key="index" @click="SSkip(item.text,index)">
					<image :src="item.imgSr" mode="" class="s_img"></image>
					{{item.text}}
				</view>
			</view>
			<view class="s_shopp">
				<view class="s_create_01" v-for="(item,index) in ImgArrs" :key="index" @click="SSkip(item.text,index)">
					<image :src="item.imgSr" mode="" class="s_img"></image>
					{{item.text}}
				</view>
			</view>
			<view class="s_friend">
				<image src="" mode="" class="s_img" @click="sCom"></image>
				社区公约
			</view>
		</view>
		<view class="sidebar_bottom">
			<view class="sidebar_bottom_01" @click="sett">
				<view class="sidebar_bottom_02">
					<image src="" mode="" class="s_b_img"></image>
				</view>
				<text>设置</text>
			</view>
			<view class="sidebar_bottom_01" @click="help">
				<view class="sidebar_bottom_02">
					<image src="" mode="" class="s_b_img"></image>
				</view>
				<text>帮助与客服</text>
			</view>
			<view class="sidebar_bottom_01" @click="sweep">
				<view class="sidebar_bottom_02">
					<image src="" mode="" class="s_b_img"></image>
				</view>
				<text>扫一扫</text>
			</view>
		
		</view>
	</view>
</template>

<script>
	export default {
		name: "sidebar",
		data() {
			return {
				ImgArr: [{
					
					text: "创作中心"
				}, {

					text: "我的草稿"
				}, {
			
					text: "浏览记录"
				}, ],
				ImgArrs: [{
				
					text: "订单"
				}, {
					
					text: "购物车"
				}, {
				
					text: "钱包"
				}, ]
			};
		},
		methods: {
			SSkip(t, i) {
				switch (t) {
					case '创作中心':
						uni.navigateTo({
							url: ''
						});
						break;
					case '我的草稿':
						uni.navigateTo({
							url: ''
						});
						break;
					case '浏览记录':
						uni.navigateTo({
							url: ''
						});
						break;
					case '订单':
						uni.navigateTo({
							url: ''
						});
						break;
					case '购物车':
						uni.navigateTo({
							url: ''
						});
						break;
					case '钱包':
						uni.navigateTo({
							url: ''
						});
						break;
				}
			},
			sFriend() {
				uni.navigateTo({
					url: ""
				})
			},
			sCom() {
				uni.navigateTo({
					url: ""
				})
			},
			sett(){
				uni.navigateTo({
					url: ""
				})
			},
			sweep(){
				uni.navigateTo({
					url:""
				})
			},
			help(){
				uni.navigateTo({
					url:""
				})
			}
		}
	}
</script>

<style>
	.sidebar {
		width: 560rpx;
		height: 1619rpx;
		display: flex;
		flex-direction: column;
	}

	.skip_page {
		margin-top: 50rpx;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
	}

	.s_friend {
		width: 400rpx;
		display: flex;
		justify-content: left;
		align-items: center;
		padding: 30rpx;
		border-bottom: 2rpx solid #f9f9f9;
		font-size: 35rpx
	}

	.s_img {
		width: 70rpx;
		height: 70rpx;
		object-fit: cover;
		object-position: center;
		margin-right: 48rpx;
	}

	.s_create,
	.s_shopp {
		width: 400rpx;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		border-bottom: 2rpx solid #f9f9f9;
		font-size: 35rpx
	}

	.s_create_01 {
		display: flex;
		justify-content: left;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.sidebar_bottom {
		width: 100%;
		height: 150rpx;
		display: flex;
		justify-content: space-evenly;
		margin-top: 520rpx;
	}

	.sidebar_bottom_01 {
		width: 30%;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		text-align: center;
	}

	.sidebar_bottom_02 {
		width: 70rpx;
		height: 70rpx;
		background-color: #e2e2e2;
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.s_b_img {
		width: 70%;
		height: 70%;
		object-fit: cover;
		object-position: center;
	}
</style>